<script>
import Draggable from 'vuedraggable'
import dict from '../../dictionary/setting-panel.js'
import { FieldQueryHandler } from '../mixins.js'

// 添加关联事件
const associatedEventAdd = (associatedEvents) => {
  let value = {
    value: [
      {label: 'Z端组件',value: ''},
      {label: '事件类型',value: ''},
      {label: '执行方法',value: ''}
    ]
  }
  associatedEvents.push(value)
}

export default {
  props: ['id', 'fullField', 'shortField', 'value'],
  functional: true,
  render (h, context) {
    const { props } = context
    let eventsValue = new Array()
    const associatedEvents = props.value
    const generateJsx = () => {
      return (
        <checkbox-group value={ eventsValue }>
          <Draggable
            element="ul"
            list={ associatedEvents }
            style="list-style: none;"
          >
            {
              associatedEvents.map((item,index) => {
                return (
                <li  style="border:1px solid #979797;padding: 10px;margin-bottom: 10px;position: relative;">
                  <a on-click={ () => associatedEvents.splice(index, 1) } style="position:absolute;right:15px;top:5px;" title="删除">X</a>
                  <ul list={ item.value } style="list-style: none;">
                  {
                    item.value.map((component) => {
                      return (
                        <li>
                          <span>{ component.label }</span>
                          <i-input value={ component.value } on-on-change={ evt => { component.value = evt.target.value } } />
                        </li>
                      )
                    })
                  }
                  </ul>
                </li>
                )
              })
            }
          </Draggable>
        </checkbox-group>
      )
    }
    return (
      <form-item label={ dict[props.fullField] }>
        <a on-click={ () => associatedEventAdd(associatedEvents) } style="position: absolute;right: 10px;top: -35px;font-size:26px;" title="添加">+</a>
        { generateJsx() }
      </form-item>
    )
  }
}
</script>
